<template>
	<view>
		<!-- <view class="searchbox" @click="togoodslist()">
			<view class="search">
				<view class="scan">
					<image src="../../static/ss1.png"></image>
				</view>
				<view class="inputbox">
					<input placeholder="搜索商品" />
				</view>
				<view class="searchbut">搜索</view>
			</view>
		</view> -->
		<kong v-if="!list.length && !loading && isEnd"></kong>
		<view class="listbox" v-for="(item, index) in list" :key="index" @click="toDetail(item.goods_id)">
			<!-- 黑幕  @longtap.prevent="longclick(index)"-->
			<!-- <view class="opacitybox" v-if="index == currone">
				<image @click.stop="delcollect(item)" src="../../static/sc2.png"></image>
				<view class="actbox">
					<view @click.stop="delcollect(item)">删除</view>
					<view @click.stop="currone=null">取消</view>
				</view>
			</view> -->
			<!-- 商品信息 -->
			<view class="leftbox">
				<image :src="item.url"></image>
			</view>
			<view class="rightbox">
				<view class="namebox">{{item.goods_name}}</view>
				<view class="numbox">
					<view>{{item.counts}}人收藏</view>
					<image @click.stop="delcollect(item)" src="../../static/lj.png"></image>
				</view>
				<view class="pricebox">￥{{ item.goods_price_min }}</view>
				<!-- <view class="similar">找相似</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import kong from '../../components/kong.vue'

	export default {
		components: {
			kong
		},
		data() {
			return {
				currone: null,
				page: 1,
				isEnd: false,
				loading: false,
				list: []
			}
		},
		onReachBottom() {
			this.getList()
		},
		onLoad() {
			this.getList()
		},
		methods: {
			toDetail(id) {
				if (this.currone != null && this.list[this.currone].goods_id == id) return
				uni.navigateTo({
					url: '/pageshop/goodsinfo/goodsinfo?id=' + id
				})
			},
			// 获取收藏列表
			async getList() {
				if (this.loading || this.isEnd) return
				this.loading = true
				try {
					let res = await this.$http({
						url: 'api/Wechat/user_collect',
						data: {
							page_index: this.page,
							page_size: 12,
						}
					})
					if (res.data.length < 12) {
						this.isEnd = true
					}
					this.list = [...this.list, ...res.data]
					this.page++
				} catch {

				} finally {
					this.loading = false
				}
			},
			longclick(index) {
				console.log('longs')
				this.currone = index
			},
			delcollect(item) {
				// const idlist =[]
				// idlist.push(+item.id)
				uni.showModal({
					title: '提示',
					content: '确定删除吗？',
					success: async (res) => {
						if (res.confirm) {
							await this.$http({
								url: 'api/Wechat/cancel_collect_goods',
								data: {
									id: item.id
								}
							}).then(mag => {
								this.isEnd = false
								this.list = []
								this.page = 1,
								this.getList()
							})

						} else if (res.cancel) {}
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.opacitybox {
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		// background-color: #000000;
		// opacity: 0.5;
		height: 284rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		text-align: center;

		image {
			width: 86rpx;
			height: 86rpx;
			margin: 30rpx 0;
		}

		.actbox {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 60%;
			margin: 0 auto;

			>view {
				width: 100rpx;
				height: 46rpx;
				border-radius: 23rpx;
				border: 2rpx solid #FFFFFF;
				line-height: 46rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.listbox {
		display: flex;
		justify-content: space-between;
		background-color: #FFF;
		padding: 12rpx 30rpx;
		align-items: center;
		height: 260rpx;

		.leftbox {
			width: 250rpx;

			image {
				width: 240rpx;
				height: 240rpx;
			}
		}

		.rightbox {
			width: 426rpx;

			.namebox {
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.numbox {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #888888;
				margin: 15rpx 0;
				display: flex;
				justify-content: space-between;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.pricebox {
				font-size: 30rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #F94D29;
			}

			.similar {
				width: 109rpx;
				height: 44rpx;
				background: #FFFFFF;
				border-radius: 22rpx;
				border: 2rpx solid #DBDBDB;
				text-align: center;
				line-height: 44rpx;
				font-size: 26rpx;
				color: #888888;
				margin-top: 12rpx;
				float: right;
			}
		}
	}

	.searchbox {
		width: 100%;
		height: 134rpx;
		display: flex;
		align-items: center;
		background-color: #FFF;
		// margin-top: 40rpx;

		.search {
			width: 690rpx;
			height: 40rpx;
			padding: 15rpx 0;
			background: #FFFFFF;
			border-radius: 36rpx;
			border: 2rpx solid #F94D29;
			display: flex;
			align-items: center;
			margin: 0 auto;

			.scan {
				width: 76rpx;
				text-align: center;
				// border-right: solid 2rpx #F2F2F2;

				image {
					width: 33rpx;
					height: 28rpx;
				}
			}

			.inputbox {
				width: 448rpx;
				height: 40rpx;
				padding: 0 24rpx;

				>input {
					width: 100%;
				}
			}

			.searchbut {
				width: 112rpx;
				height: 62rpx;
				background: linear-gradient(180deg, #F94D29 0%, #F99529 100%);
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #F7F7F7;
				line-height: 62rpx;
				text-align: center;
			}
		}
	}
</style>